<template>
    <div class="login">

        <div class="logo">
            <van-image
                    round
                    width="1rem"
                    height="1rem"
                    src="/imgs/hsjy_logo.png"
            />
        </div>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                        autocomplete="off"
                        label-width="1rem"
                        v-model="username"
                        name="username"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                        autocomplete="new-password"
                        label-width="1rem"
                        v-model="password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>


    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: '',
            }
        },
        methods: {
            onSubmit() {
                console.log(this.username, this.password);
            }
        }
    }
</script>

<style scoped lang="less">
    .login {
        height: 100vh;
        background-color: #fff;

        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 3rem;
        }

        .subBtns {
            margin: 0.32rem 0;

            .no-border {
                border: none;
                color: #999;
            }

            .van-button {
                margin-bottom: 0.1rem;
            }
        }
    }
</style>
